<cnsl-card
  title="{{ 'USER.PASSWORDLESS.TITLE' | translate }}"
  description="{{ 'USER.PASSWORDLESS.DESCRIPTION' | translate }}"
>
  <button
    card-actions
    mat-icon-button
    (click)="getPasswordless()"
    class="icon-button"
    matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
  >
    <mat-icon class="icon">refresh</mat-icon>
  </button>
  <cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getPasswordless()">
    <button
      actions
      class="button"
      (click)="addPasswordless()"
      mat-raised-button
      color="primary"
      matTooltip="{{ 'ACTIONS.NEW' | translate }}"
    >
      <div class="cnsl-action-button">
        <mat-icon>add</mat-icon>
        <span>{{ 'USER.PASSWORDLESS.U2F' | translate }}</span>
      </div>
    </button>
    <table class="table" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>{{ 'USER.PASSWORDLESS.NAME' | translate }}</th>
        <td mat-cell *matCellDef="let mfa">
          <span *ngIf="mfa?.name" class="centered">
            {{ mfa?.name }}
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef>{{ 'USER.PASSWORDLESS.TABLESTATE' | translate }}</th>
        <td mat-cell *matCellDef="let mfa">
          <span class="centered">
            <span
              class="state"
              [ngClass]="{
                active: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY,
                inactive: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY,
              }"
              >{{ 'USER.PASSWORDLESS.STATE.' + mfa.state | translate }}</span
            >
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="actions" stickyEnd>
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let mfa">
          <cnsl-table-actions>
            <button
              actions
              matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
              color="warn"
              mat-icon-button
              (click)="deletePasswordless(mfa.id)"
            >
              <i class="las la-trash"></i>
            </button>
          </cnsl-table-actions>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
      <span>{{ 'USER.PASSWORDLESS.EMPTY' | translate }}</span>
    </div>
  </cnsl-refresh-table>
  <div class="table-wrapper">
    <div class="spinner-container" *ngIf="loading$ | async">
      <mat-spinner diameter="50"></mat-spinner>
    </div>
  </div>
</cnsl-card>
